<template>
  <div>
    <h1>app.vue</h1>

    <!-- 插槽要怎么传递？ -->
    <!-- 要写成双标签 -->
    <!-- 双标签里写的内容就是给插槽传递内容 -->
    <my-checkbox> 唱 </my-checkbox>

    <my-checkbox>
      <b>跳</b>
    </my-checkbox>

    <my-checkbox> rap </my-checkbox>

    <!-- 最后这个没传，会用插槽的默认值 -->
    <my-checkbox />

    <!-- 默认情况下，给的内容都会给到默认插槽 -->
    <!-- 如果要把内容传递给具名插槽，那么这个内容必须先用`template`包起来 -->
    <!-- 并且template身上要写 v-slot:名字 代表把内容传递给某个名字的查查 -->
    <!-- <my-panel>
      <template v-slot:title>
        <h4>无题</h4>
      </template>

      <template v-slot:content>
        <div>这是诗句</div>
      </template>
    </my-panel> -->

    <!-- 简写形式 -->
    <!-- 把v-slot:全部替换成# -->
    <my-panel>
      <template #title>
        <h4>无题</h4>
      </template>

      <template #content>
        <p>今天天气十分好</p>
        <p>利群来到桃花岛</p>
        <p>看到花姐在洗澡</p>
        <p>抓起衣服赶紧跑</p>
      </template>

      <!-- 建议默认插槽也包一个template -->
      <!-- 只不过不用给名字 -->
      <!-- 默认插槽其实也有名字，只不过名字叫default -->
      <template>
        我有底线
      </template>
    </my-panel>


    <!-- 以下是讲解作用域插槽 -->
    <my-box>
        <template #footer="obj">
          <!-- 用数据永远都会找这个写代码所在的组件内的数据 -->
          <h4>我是h4 -- {{ obj.count }} -- {{ obj.price }}</h4>
        </template>
    </my-box>

    <!-- vue2.6以前的语法---目前已废弃 -->
    <!-- 
      废弃的语法是
        用 slot="插槽名字"  来指定具名插槽
        用 slot-scope="obj" 来获取插槽暴露的数据
     -->

    <my-panel>
      <template slot="title">
        <h4>老语法标题</h4>
      </template>

      <template slot="content">
        <p>老语法内容</p>
      </template>
    </my-panel>

    <my-box>
        <template slot="footer" slot-scope="obj">
          <!-- 用数据永远都会找这个写代码所在的组件内的数据 -->
          <h4>我是h4 -- {{ obj.count }} -- {{ obj.price }}</h4>
        </template>
    </my-box>
  </div>
</template>

<script>
import MyCheckbox from "./components/MyCheckbox.vue";
import MyPanel from "./components/MyPanel.vue";
import MyBox from './components/MyBox.vue'
export default {
  components: {
    MyCheckbox,
    MyPanel,
    MyBox
  },
};
</script>

<style>
</style>
MyCheckbox